import { DatePicker } from "antd"
import lessModule from "./index.module.less"
import { useEffect, useState } from "react"
import dayjs from "dayjs"
import type { Dayjs } from 'dayjs';
import { $eventBus, $RangeDateList } from "../../../../common/utils"

// 主页-日期时间选择框组件
interface homePageDateTimePickerRangeComponentComponentInterface {
    isHideInit?: boolean
    format?: string
    valueList?: Array<Dayjs>
    width: number | string
    marginLeft?: number
    change_rangePicker?: Function
    change_disabledDate?: Function
}
const HomePage_DateTimePickerRangeComponent: React.FC<homePageDateTimePickerRangeComponentComponentInterface> = (props) => {
    const { RangePicker } = DatePicker;

    const change_rangePicker = (dateList: Array<dayjs.Dayjs | null> | null, dateStringList: Array<string>) => {
        props.change_rangePicker?.(dateStringList)
        $eventBus.emit("homePageDataTimePickerRangeComponent_dateData", { dateList, dateStringList })
        $eventBus.emit("rangeDateList", { source: "HomePage_DateTimePickerRangeComponent", explain: "时间范围选择,数组数据", data: { dateList: $RangeDateList(dateStringList[0], dateStringList[1]) } })
    }

    return (
        <div className={lessModule["homePageDateTimePickerRangeComponent"]} style={{ marginLeft: props.marginLeft ?? 0 }}>
            {
                props.isHideInit && <RangePicker style={{ width: props.width }} showTime allowClear={false} format={props.format} onChange={change_rangePicker} />

            }
            {
                !props.isHideInit && <RangePicker value={[dayjs(props.valueList?.[0]), dayjs(props.valueList?.[1])]} style={{ width: props.width }} showTime allowClear={false} format={props.format} onChange={change_rangePicker} />

            }
        </div>
    )
}



export default HomePage_DateTimePickerRangeComponent